<template>
<div>
  <div style="position: fixed;top: 0;left: 0;width: 100%;height:100%;background-color: #e6faff"></div>
  <div style="position: absolute;top: 250px;left: 720px;font-style: italic">
    <h2>欢迎来到树叶招聘网</h2>
  </div>
  <el-form
      ref="ruleFormRef"
      style="max-width: 200px;position: absolute;top: 31%;left:43%;"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
  >
    <el-form-item prop="account">
      <el-input v-model="ruleForm.account" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input placeholder="密码" v-model="ruleForm.password" show-password></el-input>
    </el-form-item>
    <el-form-item prop="position">
      <el-select v-model="ruleForm.position" placeholder="职位">
        <el-option label="求职者" value="求职者"/>
        <el-option label="HR" value="HR"/>
      </el-select>
    </el-form-item>
    <el-form-item prop="email">
      <el-input v-model="ruleForm.email" placeholder="QQ邮箱"></el-input>
    </el-form-item>
    <el-form-item prop="code" style="max-width: 101px">
      <el-input placeholder="验证码" v-model="ruleForm.code" class="input-with-select"></el-input>
    </el-form-item>
  </el-form>
  <el-button slot="append" style="position: absolute;top: 503.5px;left:836px;min-width: 100px" :disabled="disabled1" @click="clickcode(ruleForm.email)">{{btntxt1}}</el-button>
  <button class="button"  @click="register(ruleForm.account,ruleForm.code)" style="position: absolute;top: 57%;left:43%">立即注册</button>
</div>
</template>
<style scoped>
.button{
  position: absolute;
  top: 550px;
  left:600px;
  background-color: #669dff;
  border: none;
  color: white;
  padding: 8px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  width: 200px;
}
</style>
<script>
import axios from "axios";
import request from "@/Utils/request.js";
export default {
  data() {
    return {
      time1:60,
      disabled1:false,
      btntxt1:"发送验证码",
      ruleForm:{
        account: '',
        password:'',
        position:'',
        email:'',
        code:'',
      },
      rules:{
        account:[
          { required:true,message:"请输入账号",trigger:"blur"},
          { min:6, max:11, message: "长度在 6 到 11 个字符",trigger:'blur' }
        ],
        password:[
          { required:true,message:"请输入密码",trigger:"blur"},
          { min:6, max:11, message: "长度在 6 到 11 个字符",trigger:'blur' }
        ],
        //phone:[{validator: this.validatorphone,trigger:'blur'}],
        email:[{validator: this.validatoremail,trigger:'blur'}]
      }
    }
  },
  methods:{
    clickcode(email){
      if(email === "" ){
        this.$message.error("系统异常，请输入正确邮箱")
      }else {
        this.time1=120;
        this.timer1();
        request.get(`/sendemail/send/${email}`).then(res=>{
              if(res === 1 ){
                this.$message.warning("请勿频繁发送")
              }else {
                this.$message.success("验证码发送成功,请稍等")
              }
        })
      }
    },
    timer1(){
      // if(!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(this.ruleForm.email)){
      //   alert("QQ邮箱格式错误!")
      // }
      // else
        if(this.time1 > 0){
          this.disabled1=true;
          this.time1--;
          this.btntxt1=this.time1+"秒";
          setTimeout(this.timer1,1000);
        }else {
          this.time1=0;
          this.btntxt1="发送验证码";
          this.disabled1=false;
        }

    },
    validatoremail(rule, value, callback){
      if(value === ''){
        callback(new Error('请输入QQ邮箱'))
      }else if(!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(this.ruleForm.email)){
        callback(new Error('QQ邮箱格式错误'))
      }else {
        callback()
      }
    },
    // validatorphone(rule, value, callback){
    //   if(value === ''){
    //     callback(new Error('请输入电话号码'))
    //   }else if(!/^1[3456789]\d{9}$/.test(this.ruleForm.phone)){
    //    callback(new Error('请输入正确的电话号码'))
    //   }else {
    //     callback()
    //   }
    // },
    //点击注册按钮插入数据在数据库user表中
    register(account,usercode){
      this.$refs.ruleFormRef.validate((valid)=>{
        if(!valid){
          this.$message({
            message:'系统异常',
            type:'error'
          })
        }
        else {
          request.post(`/sendemail/register/${usercode}`,{
                account:this.ruleForm.account,
                password:this.ruleForm.password,
                position:this.ruleForm.position,
                email:this.ruleForm.email
              }
          ).then(res=>{
            console.log(res)
            if(res === 1){
              this.$message({
                message:'注册成功',
                type:'success'
              })
              //插入account在user_biographical_notes表接口
              request.post(`/userresume/insertaccount/${account}`).then(res=>{
              })
              this.$router.push('/')
            }
            else if(res === -2){
              this.$message.error("系统异常，邮箱已被占用")
            }else {
              this.$message.error("系统异常，验证码过期或错误")
            }
          })
        }

      })
    }
  },
}
</script>
